<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>订单统计</title>
<script type="text/javascript" th:src="@{/bootstrap3/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/npm.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/popper.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap3/js/bootstrap-popover.js}"></script>
<script type="text/javascript" th:src="@{/echarts/echarts.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap3/css/bootstrap-theme.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap3/css/bootstrap.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap3/css/bootstrap-theme.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/bootstrap3/css/bootstrap.min.css}" />
</head>
<script type="text/javascript">
	var date = new Date();
	var year = date.getFullYear();
	var content = "";
	// 基于准备好的dom，初始化echarts实例
	var dom1 = echarts.init(document.getElementById('dom1'));
	var dom2 = echarts.init(document.getElementById('dom2'));
	var dom3 = echarts.init(document.getElementById('dom3'));
	var dom4 = echarts.init(document.getElementById('dom4'));
	$(document).ready(
		function(){
			//ajax获取对应数据
			$.ajax({
				type:"post",
				url:"getcountsub",
				async:true,
				data:{year:year},//当前的年份
				dataType:"json",
				success:function(data){
					// 指定图表的配置项和数据
			        var option1 = {
			            title: {
			                text: '近5年订单成交量'
			            },
			            tooltip: {},
			            legend: {
			                data:['订单数']
			            },
			            xAxis: {
			                //data: [year+'年',(year+1)+'年',(year+2)+'年',(year+3)+'年',(year+4)+'年']
			                data: [year+'年',(year-1)+'年',(year-2)+'年',(year-3)+'年',(year-4)+'年']
							//data: [(year-4)+'年',(year-3)+'年',(year-2)+'年',(year-1)+'年',year+'年']
			            },
			            yAxis: {},
			            series: [{
			                name: '订单数',
			                type: 'bar',
			                data: data
			            }]
			        };
			        var option2 = {
			            title: {
			                text: '近5年订单成交量'
			            },
			            tooltip: {},
			            legend: {
			                data:['订单数']
			            },
			            
			            series: [{
			                name: '订单数',
			                type: 'pie',
			                data: [
			                	// {value:data[0],name:year+'年'},
			                	// {value:data[1],name:(year+1)+'年'},
			                	// {value:data[2],name:(year+2)+'年'},
			                	// {value:data[3],name:(year+3)+'年'},
								// {value:data[4],name:(year+4)+'年'}

								{value:data[0],name:year+'年'},
								{value:data[1],name:(year-1)+'年'},
								{value:data[2],name:(year-2)+'年'},
								{value:data[3],name:(year-3)+'年'},
								{value:data[4],name:(year-4)+'年'}

								// {value:data[4],name:(year-4)+'年'},
								// {value:data[3],name:(year-3)+'年'},
								// {value:data[2],name:(year-2)+'年'},
								// {value:data[1],name:(year-1)+'年'},
								// {value:data[0],name:year+'年'}
			                ]
			            }]
			        };
			        var option3 = {
			            title: {
			                text: '近5年订单成交趋势'
			            },
			            tooltip: {},
			            legend: {
			                data:['订单数']
			            },
			            xAxis: {
			                //data: [year+'年',(year+1)+'年',(year+2)+'年',(year+3)+'年',(year+4)+'年']
			                data: [year+'年',(year-1)+'年',(year-2)+'年',(year-3)+'年',(year-4)+'年']
			                //data: [(year-4)+'年',(year-3)+'年',(year-2)+'年',(year-1)+'年',year+'年']
			            },
			            //yAxis: {data[4],data[3],data[2],data[1],data[0]},
						yAxis:{},
			            series: [{
			                name: '订单数',
			                type: 'line',
			                data: data
			            }]
			        };
			        var option4 = {
			            title: {
			                text: '近5年订单成交量'
			            },
			            tooltip: {},
			            legend: {
			                data:['订单数']
			            },
			            series: [{
			                name: '订单数',
			                type: 'pie',
			                data: [
			                	// {value:data[0],name:'2020年'},
			                	// {value:data[1],name:'2019年'},
			                	// {value:data[2],name:'2018年'},
			                	// {value:data[3],name:'2017年'},
			                	// {value:data[4],name:'2016年'}

								// {value:data[0],name:year+'年'},
								// {value:data[1],name:(year+1)+'年'},
								// {value:data[2],name:(year+2)+'年'},
								// {value:data[3],name:(year+3)+'年'},
								// {value:data[4],name:(year+4)+'年'}

								{value:data[0],name:year+'年'},
								{value:data[1],name:(year-1)+'年'},
								{value:data[2],name:(year-2)+'年'},
								{value:data[3],name:(year-3)+'年'},
								{value:data[4],name:(year-4)+'年'}

								// {value:data[4],name:(year-4)+'年'},
								// {value:data[3],name:(year-3)+'年'},
								// {value:data[2],name:(year-2)+'年'},
								// {value:data[1],name:(year-1)+'年'},
								// {value:data[0],name:year+'年'}
			                ],
			                roseType: "radius"
			            }]
			        };
			        //加载数据
			        dom1.setOption(option1);
			        dom2.setOption(option2);
			        dom3.setOption(option3);
			        dom4.setOption(option4);
				},
				error:function(){
					window.alert("内部故障");
				}
			});
			
        	
		}
	);
</script>
<body>
<div class="container-fluid">
	<div class="panel panel-default">
		<div class="panel-body" style="height: 750px;overflow: auto;">
			<div class="row">
				<!--柱状图-->
				<div id="dom1"  style="height:400px;overflow: auto;" class="col-sm-6">
				</div>
				<!--饼图-->
				<div id="dom2"  style="height:400px;overflow: auto;" class="col-sm-6">
				</div>
			</div>
			<div class="row">
				<!--折线图-->
				<div id="dom3"  style="height:400px;" class="col-sm-6">
				</div>
				<!--横向图-->
				<div id="dom4"  style="height:400px;" class="col-sm-6">
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
